<template>
    <el-scrollbar style="height: 92vh;">
        <el-container class="cantainer-box">
            <el-header>
                <el-select v-model="paramForm.type" placeholder="请选择" style="width: 150px;margin-right: 10px;">
                    <el-option v-for="item in statusWebTypeOption" :key="item.type" :value="item.type" :label="item.msg"></el-option>
                </el-select>
                <el-button type="primary" @click="refreshList">查询</el-button>
            </el-header>
            <el-main>
                <div style="display: flex;">
                    <div style="margin-right: 20px;">
                        <el-button type="primary" @click="refreshMonthStatus(1)">更新积分</el-button>
                    </div>
                    <div>
                        <el-button type="primary" @click="refreshMonthStatus(2)">更新时长</el-button>
                    </div>
                </div>
                <el-table :data="memberState.pageData.records" style="width: 100%">
                    <el-table-column fixed="left" label="操作" min-width="70" v-slot="scope">
                        <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,7)">更新积分</el-button>
                        <el-button link type="primary" size="small" @click="runDoQuestion(scope.row,9)">更新时长</el-button>
                    </el-table-column>
                    <el-table-column prop="username" label="用户" min-width="70"></el-table-column>
                    <el-table-column prop="points1" label="积分" min-width="80"></el-table-column>
                    <el-table-column prop="points2" label="本月时长" min-width="80"></el-table-column>
                    <el-table-column prop="points3" label="本日时长(7200=2h)" min-width="80"></el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" min-width="100"></el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <div class="demo-pagination-block">
                    <el-pagination
                        v-model:current-page="memberState.pageData.pageNum"
                        v-model:page-size="memberState.pageData.pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :size="size"
                        :disabled="disabled"
                        :background="background"
                        layout="total,sizes, prev, pager, next"
                        :total="memberState.pageData.recordsTotal"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </el-footer>
        </el-container>
    </el-scrollbar>
    

</template>

<script setup lang="ts" name="MkMonthStatus">


import { ref,reactive, onMounted } from 'vue'
import { monthStatusByTypeApi, runQuestionByMemberIdApi, viewMonthStatusListApi } from '@/http/api/mk/mkDoQuestion';
import { MkMember} from '@/bean/mk/MkMember';
import { ElMessage, type ComponentSize  } from 'element-plus';
import { MyPageData } from '@/bean/base/page';


const statusWebTypeOption = [
    {type:0,msg:"全部"},
    {type:1,msg:"网站1"},
    {type:2,msg:"网站2"},
    {type:3,msg:"网站3"}
];

const paramForm = reactive({
    pageNum: 1,
    pageSize: 10,
    type:0
})





const memberState = reactive(new MyPageData<MkMember>);



onMounted(() => {
    refreshList();
})

//获取页面数据
async function refreshList() {
    viewMonthStatusListApi(paramForm).then((res)=>{
        memberState.pageData = res.data;
    });
}

function refreshMonthStatus(type:number) {
    let tempParam = { type:type};
    monthStatusByTypeApi(tempParam).then((res:any)=>{
        ElMessage({
            message: '后台更新中，请稍后查看',
            type: 'success',
        })
    });
}

function runDoQuestion(item:any,type:number) {
    let tempParam = {
        id:item.memberId,
        type:type
    };
    runQuestionByMemberIdApi(tempParam).then((res:any)=>{
        refreshList();
    });
}



const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)


const handleSizeChange = (val: number) => {
    paramForm.pageSize = val;
    refreshList();
}
const handleCurrentChange = (val: number) => {
    paramForm.pageNum = val;
    refreshList();
}

</script>

<style scoped>
.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}

.el-footer {
    height: 80px;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>